<template>
	<view class="indes">
		<scroll-view style="height: 100vh;" scroll-y="true" scroll-with-animation>
			<view class="bagesfg">
				<image :src="url+'xiangmu/souye_1.jpg'"></image>
			</view>
			<view class="boxAys">
				<view class="boxAys_1">
					<view class="picker" @click="open">
						<text class="iconfont iconriqi" style="font-size: 36upx;margin-right: 10upx;"></text> <text
							class="boxAys_1x">{{yue}}</text>月<text class="boxAys_1x">{{ri}}</text>日 <text
							style="font-size: 28upx;font-weight: 500;margin-left: 10upx;">{{dayOfWeek}}</text>
					</view>
					<uv-calendars :color="'#4374eb'" :round="15" ref="calendar" @confirm="confirmA" :startDate="currentDate" :date="departDate"
						:safeAreaInsetBottom="false"></uv-calendars>
				</view>
				<view class="boxAys_2">
					<view class="boxAys_2x">
						<view class="boxAys_2x_1" @click="xuzeYs(1)" :style="{color:starpion?'#000':''}">
							{{starpion||'出发地'}}
						</view>
						<view class="iconfont iconqiehuangongsi" @click="qiehuan()">

						</view>
						<view class="boxAys_2x_1" @click="xuzeYs(2)" :style="{color:endpion?'#000':''}">
							{{endpion||'目的地'}}
						</view>
					</view>
					<view class="boxAys_2y" @tap="primary()">
						班次查询
					</view>
					<view class="boxAys_2z" v-if="bcList.length>0">
						<scroll-view class="boxAys_2z_1" scroll-x="true">
							<text style="display: inline-block;margin-right: 30upx;" v-for="(item,index) in bcList"
								v-if="index<5" :key="index"
								@click="clilks(item)">{{item.starpion}}-{{item.endpion}}</text>
						</scroll-view>
						<view class="boxAys_2z_2" @click="qingchu">
							清除
						</view>
					</view>
				</view>
			</view>
			<view class="userd" v-if="array.length>0">
				<view class="xdd">热门线路</view>
				<view class="adds">
					<view class="aposre" @tap="primary(item)" v-for="(item,index) in array" :key="index"
						v-if="item.startStation&&item.endStation">
						<text class="left">{{item.startStation}}</text>-
						<text class="right">{{item.endStation}}</text>
					</view>
				</view>
			</view>
			<view class=" bagstwo">
				<image :src="url+'xiangmu/souye_2.jpg'"></image>
			</view>
		</scroll-view>
		<huiyuanmiaoshu v-if="isShow" @guanbi="guanbi"></huiyuanmiaoshu>
	</view>
</template>

<script>
	import huiyuanmiaoshu from '@/components/huiyuanmiaoshu/index.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			huiyuanmiaoshu
		},
		data() {
			return {
				starpion: '',
				endpion: '',
				bcList: [],
				url: this.$store.state.ImageUrl,
				array: [],
				isShow: true,
				keyword: '',
				departDate: '',
				yue: '',
				ri: '',
				dayOfWeek: ''
			}
		},
		computed: {
			...mapState(['currentDate']),
		},
		onLoad() {
			const dataY = uni.getStorageSync('siteKey');
			if (dataY) {
				this.bcList = JSON.parse(dataY)
			}
			const value = uni.getStorageSync('userJson');
			if (value) {
				var data = JSON.parse(value)
				uni.setStorage({
					key: 'userId',
					data: data.id,
					success: function() {
						console.log('userId');
					}
				});
			}
			this.findList()
			this.findPopularLines()
			this.isShow = this.$store.state.isShow
		},
		onShow() {

		},
		methods: {
			...mapMutations(['getData', 'currentDateStr']),
			async findList() {
				await this.currentDateStr()
				this.departDate = this.currentDate
				this.timeDate(this.departDate)
			},
			open() {
				this.$refs.calendar.open();
			},
			timeDate(departDate) {
				if (departDate) {
					let parts = departDate.split("-");
					this.yue = parts[1]
					this.ri = parts[2]
					const specifiedDate = new Date(departDate);
					// 获取这个指定日期是星期几
					const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					this.dayOfWeek = days[specifiedDate.getDay()];
				}
			},
			confirmA(e) {
				this.departDate = e.fulldate
				this.timeDate(this.departDate)
			},
			findPopularLines(e) {
				var that = this
				var objP = {
					"pageNum": 1,
					"pageSize": 100,
				}
				that.objectArra = []
				const obj = {
					url: 'ddLine/findPopularLines',
					data: objP,
					success(res) {
						that.array = res.datas.list
					},
					fail(res) {

					},
					complete(res) {}
				}
				that.getData(obj)

			},
			qiehuan() {
				const temp = this.starpion;
				this.starpion = this.endpion;
				this.endpion = temp;
			},
			qingchu() {
				this.bcList = []
				uni.removeStorage({
					key: 'siteKey',
					success: function(res) {
						console.log('success');
					}
				});
			},
			clilks(e) {
				this.starpion = e.starpion
				this.endpion = e.endpion
			},
			xuzeYs(e) {
				uni.navigateTo({
					url: '/pagesA/Site/Site?id=' + e + '&starpion=' + this.starpion + '&endpion=' + this.endpion
				})
			},
			primary(e) {
				if (e) {
					this.starpion = e.startStation
					this.endpion = e.endStation

				} else {
					if (this.starpion == '') {
						uni.showToast({
							title: '请选择出发地～',
							icon: "none",
							duration: 3000
						})
						return false
					}
					if (this.endpion == '') {
						uni.showToast({
							title: '请选择目的地～',
							icon: "none",
							duration: 3000
						})
						return false
					}
				}
				var objs = {
					starpion: this.starpion,
					endpion: this.endpion,
					id: this.starpion + this.endpion
				}
				this.bcList.unshift(objs)
				this.bcList = this.removeDuplicates(this.bcList, 'id')
				uni.setStorage({
					key: 'siteKey',
					data: JSON.stringify(this.bcList)
				})
				var form = {
					departDate: this.departDate,
					shows: 1,
					starpion: this.starpion,
					endpion: this.endpion
				}
				uni.navigateTo({
					url: '/pagesA/shuopiaolist/shuopiaolist?id=' + JSON.stringify(form)
				})
			},
			removeDuplicates(arr, key) {
				let map = new Map();
				let result = [];
				arr.forEach(item => {
					if (!map.has(item[key])) {
						map.set(item[key], true); // 或存储对象本身，视需要而定
						result.push(item);
					}
				});
				return result;
			},
			guanbi() {
				this.isShow = false
				this.$store.state.isShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.indes {
		height: 100vh;
		background: #f7f7f7;
	}

	.bagesfg {
		width: 100%;
		height: 400upx;
		border-bottom-left-radius: 30upx;
		border-bottom-right-radius: 30upx;
		overflow: hidden;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.boxAys {
		background-color: #f7f7f7;
		margin: 0 25upx;
		border: 2upx solid #fff;
		margin-top: -80upx;
		position: relative;
		z-index: 1000;
		border-radius: 30upx;
		display: flex;
		flex-direction: column;
		margin-bottom: 25upx;

		.boxAys_1 {
			display: flex;
			align-items: center;
			height: 90upx;
			flex: none;
			padding: 0 30upx;

			.picker {
				font-size: 24upx;

				.boxAys_1x {
					font-weight: 500;
					font-size: 38upx;
				}
			}
		}

		.boxAys_2 {
			flex: 1;
			background: #fff;
			border-radius: 30upx;
			padding: 30upx;

			.boxAys_2x {
				display: flex;
				align-items: center;
				height: 120upx;
				justify-content: center;

				.boxAys_2x_1 {
					font-size: 34upx;
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #808080;
				}

				.iconqiehuangongsi {
					font-size: 60upx;
					color: #3478f6;
					margin: 0 30upx;
				}
			}

			.boxAys_2y {
				height: 100upx;
				margin-top: 30upx;
				background-color: #3478f6;
				color: #fff;
				border-radius: 50upx;
				display: flex;
				align-items: center;
				font-size: 36upx;
				justify-content: center;
			}

			.boxAys_2z {
				margin-top: 30upx;
				display: flex;
				align-items: center;

				.boxAys_2z_1 {
					flex: none;
					width: 540upx;
					color: #999;
					font-size: 26upx;
					white-space: nowrap
				}

				.boxAys_2z_2 {
					flex: none;
					width: 100upx;
					font-size: 28upx;
					color: #666;
					text-align: center;
				}
			}
		}

	}


	.userd {
		background: #fff;
		margin: 25upx 25upx;
		margin-top: 0;
		border-radius: 30upx;
		overflow: hidden;

		.xdd {
			color: #000;
			position: relative;
			z-index: 100;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
			padding: 0 30upx;
		}

		.adds {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 10upx;

			.aposre {
				background-color: #f5f5f5;
				height: 80upx;
				margin: 0 25rpx;
				margin-bottom: 20upx;
				margin-right: 0;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				font-size: 28rpx;
				color: #333;

				.left {
					margin: 0 6rpx;
				}

				.right {
					margin: 0 6rpx;
				}
			}
		}
	}

	.bagstwo {
		height: 360rpx;
		width: 100%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>